<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>冰阔落-首页</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicons -->

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext" rel="stylesheet">
    <link th:href="@{/lib/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/lib/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/lib/fancybox/fancybox.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/global.css}" />
    <link rel="prefetch" th:href="@{/img/zoom.png}">


</head>

<body data-spy="scroll" data-offset="58" data-target="#navigation">

<!-- Fixed navbar -->
<div id="navigation" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a th:href="@{/index}" class="smoothscroll">首页</a></li>
                <li><a th:href="@{/home}">交流中心</a></li>
                <li><a href="#about-us" class="smoothscroll">关于我们</a></li>

                <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser!=null}">
                    <a class="nav-link position-relative" th:href="@{/letter/list}">消息<span class="badge badge-danger" th:text="${allUnreadCount!=0?allUnreadCount:''}">12</span></a>
                </li>
                <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser==null}">
                    <a class="nav-link" th:href="@{/register}">注册</a>
                </li>
                <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser==null}">
                    <a class="nav-link" th:href="@{/login}">登录</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

<!-- === MAIN Background === -->
<div class="slide story" id="intro" data-slide="1">
    <div class="container">
        <div id="home-row-1" class="row clearfix">
            <div class="col-12">
                <h1 class="font-semibold">冰阔落 <span class="font-thin">社区</span></h1>
                <h4 class="font-thin">欢迎 <span class="font-semibold">加入</span> 冰阔落社区</h4>
                <br>
                <br>
            </div>
            <!-- /col-12 -->
        </div>
        <!-- /row -->
        <div id="home-row-2" class="row clearfix">

            <div class="col-12 col-sm-4">
                <a href="#portfolio" class="smoothscroll navigation-slide-a"><div class="home-hover navigation-slide"><img src="img/s02.png"></div><span>PROFESSIONAL</span></a>
            </div>

            <div class="col-12 col-sm-4">
                <a href="#process" class="smoothscroll navigation-slide-a"><div class="home-hover navigation-slide"><img src="img/s01.png"></div><span>FRIENDLY</span></a>
            </div>

            <div class="col-12 col-sm-4">
                <a href="#clients" class="smoothscroll navigation-slide-a"><div class="home-hover navigation-slide"><img src="img/s03.png"></div><span>SUITABLE</span></a>
            </div>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /slide1 -->

<!-- === Slide 2 === -->
<div class="slide story" id="about-us" data-slide="1">
    <div class="container">
        <!-- /row -->
        <div class="row content-row">
            <div class="col-12 col-lg-3 col-sm-6">
                <p><i class="fa fa-eye"></i></p>
                <h2 class="font-thin">Visual <span class="font-semibold">Identity</span></h2>
                <h4 class="font-thin">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
            </div>
            <!-- /col12 -->
            <div class="col-12 col-lg-3 col-sm-6">
                <p><i class="fa fa-laptop"></i></p>
                <h2 class="font-thin">Web <span class="font-semibold">Design</span></h2>
                <h4 class="font-thin">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
            </div>
            <!-- /col12 -->
            <div class="col-12 col-lg-3 col-sm-6">
                <p><i class="fa fa-tablet"></i></p>
                <h2 class="font-thin">Mobile <span class="font-semibold">Apps</span></h2>
                <h4 class="font-thin">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
            </div>
            <!-- /col12 -->
            <div class="col-12 col-lg-3 col-sm-6">
                <p><i class="fa fa-pencil"></i></p>
                <h2 class="font-semibold">Development</h2>
                <h4 class="font-thin">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
            </div>
            <!-- /col12 -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /slide2 -->


<div id="copyrights">
    <div class="container">
        <p>
            &copy; Copyrights <strong>Munter</strong>. All Rights Reserved
        </p>
        <div class="credits">
            <!--
              You are NOT allowed to delete the credit link to TemplateMag with free version.
              You can delete the credit link only if you bought the pro version.
              Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/munter-bootstrap-one-page-template/
              Licensing information: https://templatemag.com/license/
            -->
            Created with Munter template by <a href="https://templatemag.com/">TemplateMag</a>
        </div>
    </div>
</div>

<!-- JavaScript Libraries -->
<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/lib/easing/easing.min.js}"></script>
<script th:src="@{/lib/php-mail-form/validate.js}"></script>
<script th:src="@{/lib/fancybox/fancybox.js}"></script>

<!-- Template Main Javascript File -->
<script th:src="@{/js/main.js}"></script>

</body>
</html>
